<script setup lang="ts">

import { useRouter } from 'vue-router';

import {BasicForm, FormSchema, useForm} from '/@/components/Form/index';
import {CollapseContainer} from '/@/components/Container/index';
import {useMessage} from '/@/hooks/web/useMessage';
import {PageWrapper} from '/@/components/Page';
import BaseCompanyForm from "@/views/app/components/BaseCompanyForm.vue";

const router = useRouter();
console.log(router);

const schemas: FormSchema[] = [
    {
        field: 'field1',
        component: 'Input',
        label: '字段1',
        colProps: {
            span: 8,
        },
        componentProps: {
            placeholder: '自定义placeholder',
            onChange: (e: any) => {
                console.log(e);
            },
        },
    },
    {
        field: 'field2',
        component: 'Input',
        label: '字段2',
        colProps: {
            span: 8,
        },
    },
    {
        field: 'field3',
        component: 'DatePicker',
        label: '字段3',
        colProps: {
            span: 8,
        },
    },
    {
        field: 'fieldTime',
        component: 'RangePicker',
        label: '时间字段',
        defaultValue: [new Date("2024-03-21"), new Date("2024-03-27")],
        componentProps: {
            valueType: 'Date',
        },
        colProps: {
            span: 8,
        },
    },
    {
        field: 'field4',
        component: 'Select',
        label: '字段4',
        colProps: {
            span: 8,
        },
        componentProps: {
            options: [
                {
                    label: '选项1',
                    value: '1',
                    key: '1',
                },
                {
                    label: '选项2',
                    value: '2',
                    key: '2',
                },
            ],
        },
    },
    {
        field: 'field5',
        component: 'CheckboxGroup',
        label: '字段5',
        colProps: {
            span: 8,
        },
        componentProps: {
            options: [
                {
                    label: '选项1',
                    value: '1',
                },
                {
                    label: '选项2',
                    value: '2',
                },
            ],
        },
    },
    {
        field: 'field7',
        component: 'RadioGroup',
        label: '字段7',
        colProps: {
            span: 8,
        },
        componentProps: {
            options: [
                {
                    label: '选项1',
                    value: '1',
                },
                {
                    label: '选项2',
                    value: '2',
                },
            ],
        },
    },
];

const {createMessage} = useMessage();

const [register, {setProps}] = useForm({
    labelWidth: 120,
    schemas,
    actionColOptions: {
        span: 24,
    },
    fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
});

function handleSubmit (values: Recordable) {
    console.error("123456");
    createMessage.success('click search,values:' + JSON.stringify(values));
    router.back();
}
</script>

<template>
    <PageWrapper title="UseForm操作示例">
        <BaseCompanyForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></BaseCompanyForm>
    </PageWrapper>
</template>

<style scoped lang="less">

</style>
